<template>
  <div class="products">
    <BsSubmenu :subMenus="subMenus" />
    <!-- banner -->
    <section class="banner">
      <div class="text-center f24">
        解决方案
      </div>
    </section>
    <div class="hd">
      <img :src="img"  width="100%" alt="">
    </div>
  </div>
</template>

<script>
import BsSubmenu from '@/components/BsSubmenu'
import img1 from '../assets/images/index/教育机构.jpg'
import img2 from '../assets/images/index/培训机构.jpg'
import img3 from '../assets/images/index/政府企业.jpg'

export default {
  components:{BsSubmenu},
  mounted () {
    let type = this.$route.query.type || '1'
    this.img = this.imgs[type]
    this.subMenus.forEach(v => {
      v.active = (type == v.type)
    })
  },
  beforeRouteUpdate (to, from, next){
    let type = to.query.type || '1'
    this.img = this.imgs[type]
    this.subMenus.forEach(v => {
      v.active = (type == v.type)
    })
    next()
  },
  data () {
    return {
      img: '',
      imgs: ['', img1, img2, img3],
      subMenus: [
        {title: '教育机构', link:'/solutions', active: true, type:1},
        {title: '培训机构', link:'/solutions?type=2', active: false, type:2},
        {title: '政府企业', link:'/solutions?type=3', active: false, type:3},
      ]
    }
  }
}
</script>

<style scoped>
.banner{
  background: url(../assets/images/products/solutions.jpg) no-repeat center center;
  height: 210px;
  color: #fff;
  line-height: 210px;
}
</style>
